﻿@model Model.Sysuser;

@{
    Layout = null;
}

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Login</title>
    <script src="~/js/jquery-2.2.4.min.js"></script>
    <script src="~/layer/layer/layer.js"></script>

    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: "微软雅黑";
        }

        body {
            background: #F7F7F7;
        }

        .form {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -185px;
            margin-top: -210px;
            height: 420px;
            width: 340px;
            font-size: 18px;
            -webkit-box-shadow: 0px 0px 10px #A6A6A6;
            background: #fff;
        }

        .border-btn {
            border-bottom: 1px solid #ccc;
        }

        #landing,
        #registered {
            float: left;
            text-align: center;
            width: 170px;
            padding: 15px 0;
            color: #545454;
        }

        #landing-content {
            clear: both;
        }

        .inp {
            height: 30px;
            margin: 0 auto;
            margin-bottom: 30px;
            width: 200px;
        }

            .inp > input {
                text-align: center;
                height: 30px;
                width: 200px;
                margin: 0 auto;
                transition: all 0.3s ease-in-out;
            }

        .login {
            border: 1px solid #A6A6A6;
            color: #a6a6a6;
            height: 30px;
            width: 202px;
            text-align: center;
            font-size: 13.333333px;
            margin-left: 70px;
            line-height: 30px;
            margin-top: 30px;
            transition: all 0.3s ease-in-out;
        }

            .login:hover {
                background: #A6A6A6;
                color: #fff;
            }

        #bottom {
            margin-top: 30px;
            font-size: 13.333333px;
            color: #a6a6a6;
        }

        #registeredtxt {
            float: left;
            margin-left: 80px;
        }

        #forgotpassword {
            float: right;
            margin-right: 80px;
        }

        #photo {
            border-radius: 80px;
            border: 1px solid #ccc;
            height: 80px;
            width: 80px;
            margin: 0 auto;
            overflow: hidden;
            clear: both;
            margin-top: 30px;
            margin-bottom: 30px;
        }

            #photo > img:hover {
                -webkit-transform: rotateZ(360deg);
                -moz-transform: rotateZ(360deg);
                -o-transform: rotateZ(360deg);
                -ms-transform: rotateZ(360deg);
                transform: rotateZ(360deg);
            }

            #photo > img {
                height: 80px;
                width: 80px;
                -webkit-background-size: 220px 220px;
                border-radius: 60px;
                -webkit-transition: -webkit-transform 1s linear;
                -moz-transition: -moz-transform 1s linear;
                -o-transition: -o-transform 1s linear;
                -ms-transition: -ms-transform 1s linear;
            }


        #registered-content {
            margin-top: 40px;
            display: none;
        }

        .fix {
            clear: both;
        }

        .form {
            display: none;
        }
    </style>

</head>

<body>
    <div class="form">
        <div id="landing">登陆</div>
        <div id="registered">注册</div>
        <div class="fix"></div>
        <div id="landing-content">
            <form id="LoginForm" asp-action="Login" method="post">
                <div id="photo"><img src="~/img/photo.jpg"></div>
                <div class="inp"><input type="text" name="Name" id="Name" placeholder="用户名" value="ldj"></div>
                <div class="inp"><input type="password" name="Password" id="Password" placeholder="密码" value="0"></div>
                <div class="login" id="login">登录</div>
                <div id="bottom"><span id="registeredtxt">登录</span><span id="forgotpassword">忘记密码</span></div>
             </form>
        </div>
        <div id="registered-content">
            <div class="inp"><input type="text" name="Name" id="zcName" placeholder="请输入用户名"></div>
            <div class="inp"><input type="password" name="Password" id="zcPassword" placeholder="请输入密码"></div>
            <div class="inp"><input type="password" id="ConPassword" placeholder="请再次输入密码"></div>
            <div class="inp"><input type="text" id="ShowName" placeholder="姓名"></div>
            <div class="login" id="zc">立即注册</div>
        </div>
    </div>


    <script>
        $(document).ready(function () {

            $(".form").slideDown(500);

            $("#landing").addClass("border-btn");

            $("#registered").click(function () {
                $("#landing").removeClass("border-btn");
                $("#landing-content").hide(500);
                $(this).addClass("border-btn");
                $("#registered-content").show(500);

            })

            $("#landing").click(function () {
                $("#registered").removeClass("border-btn");
                $(this).addClass("border-btn");

                $("#landing-content").show(500);
                $("#registered-content").hide(500);
            })
            function login() {
                $.ajax({
                    type: "post",
                    url: "/home/Login",
                    data: { Name: $("#Name").val(), Password: $("#Password").val() },
                    dataType: "json",
                    success: function (json) {
                        console.log(json);
                        layer.msg(json.msg);
                        if (!json.success) {
                            $("#Name").val("");
                            $("#Password").val("");
                        }
                        else {
                            window.location.href = '/admin/index';
                        }
                    }
                });
            };
            $('#login').click(function () {
                login();
            });

                $('#zc').click(function () {
                    if ($("#ConPassword").val() != $("#zcPassword").val()) {
                        layer.msg('密码不一致'); return;
                    }
                    $.ajax({
                        type: "post",
                        url: "/home/Register",
                        data: {
                            Name: $("#zcName").val(),
                            Password: $("#zcPassword").val(), 
                            ConPassword: $("#ConPassword").val(),
                            ShowName: $("#ShowName").val()
                            },
                        dataType: "json",
                        success: function (json) {
                            console.log(json);
                            layer.msg(json.msg);
                            if (json.success) { $("#landing").click(); }
                            else {
                                $("#Name").val(""); $("#Password").val(""); $("#ConPassword").val(""); $("#ShowName").val("");
                            }
                        }
                    });
                });


            document.onkeydown = function (e) {
                var ev = document.all ? window.event : e;
                if (ev.keyCode == 13) {
                    login();
	                }
            }
        });
    </script>
</body>
</html>

